<template>
<!--合同收付款 -->
  <div class="payment">
    <div>
      <div class="title-name">合同收款</div>
      <div id="collection" style="width:100%;height:170px;"></div>
      <div class="bottom-info">
        <div>
          <p>合同金额</p>
          <span>775万</span>
        </div>
        <div>
          <p>收款金额</p>
          <span>319万</span>
        </div>
        <div>
          <p>待收金额</p>
          <span>456万</span>
        </div>
      </div>
    </div>
    <div>
      <div class="title-name">合同付款</div>
      <div id="paying" style="width:100%;height:170px;"></div>
      <div class="bottom-info">
        <div>
          <p>合同金额</p>
          <span>775万</span>
        </div>
        <div>
          <p>收款金额</p>
          <span>319万</span>
        </div>
        <div>
          <p>待收金额</p>
          <span>456万</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "payment",
  data(){
    return{
      chartOne:'',
      chartTwo:''
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart1()
      this.initChart2()
    })
  },
  methods:{
    initChart1(){
      const ctx = document.getElementById('collection')
      this.chartOne = echarts.init(ctx)
      const startAngle = 220
      const endAngle = -40
      let option = {
        backgroundColor: '#fff',
        title: [
          {
            text: `{value|${41.2}%}\n{name|${'收款比率'}}`,
            left: 'center',
            bottom: '23%',
            textStyle: {
              rich: {
                value: {
                  fontSize: '20',
                  fontWeight: '900',
                  color: 'green',
                  padding: [8, 0]
                },
                name: {
                  fontSize: '14',
                  color: 'green'
                }
              }
            }
          }
        ],
        series: [
          {
            name: '最外层-刻度尺',
            type: 'gauge',
            radius: '55%',
            startAngle,
            endAngle,
            axisLine: {
              lineStyle: {
                color: [[1, 'green']],
                width: 1
              }
            },
            axisTick: {
              distance: -6,
              length: 7,
              lineStyle: {
                color: 'green'
              },
              splitNumber: 10
            },
            splitLine: {
              distance: -11,
              length: 14,
              lineStyle: {
                color: 'green',
                width: 1
              }
            },
            axisLabel: {
              show: false
            },
            pointer: {
              show: false
            }
          },
          {
            name: '内层带指针',
            type: 'gauge',
            radius: '52%',
            startAngle,
            endAngle,
            axisLine: {
              lineStyle: {
                color: [[1, '#abd79e']],
                width: 20
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: 'green',
                fontSize: '10px'
              }
            },
            detail: {
              show: false
            },
            pointer: {
              show: true,
              length: '86%',
              width: 10,
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: 'green'
                    },
                    {
                      offset: 1,
                      color: '#abd79e'
                    }
                  ]
                }
              }
            },
            progress: {
              show: true,
              width: 20,
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: 'green'
                    },
                    {
                      offset: 1,
                      color: '#9bd08c'
                    }
                  ]
                }
              }
            },
            data: [
              {
                value: 43
              }
            ]
          },
          {
            name: '中心效果圆',
            type: 'gauge',
            radius: '14%',
            startAngle: 0,
            endAngle: 360,
            axisLine: {
              lineStyle: {
                color: [[1, 'green']],
                width: 1
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            detail: {
              show: false
            },
            pointer: {
              show: false
            },
            progress: {
              show: true,
              width: 1,
              itemStyle: {
                color: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#abd79e'
                    },
                    {
                      offset: 0.7,
                      color: '#9bd08c'
                    },
                    {
                      offset: 1,
                      color: 'green'
                    }
                  ]
                }
              }
            },
            data: [
              {
                value: 100
              }
            ]
          },
          {
            type: 'pie',
            radius: ['70%', '69.5%'],
            hoverAnimation: false,
            clockWise: false,
            itemStyle: {
              normal: {
                color: 'green'
              }
            },
            label: {
              show: false
            },
            data: [100]
          }
        ]
      }
      this.chartOne.setOption(option)
    },
    initChart2(){
      const ctx = document.getElementById('paying')
      this.chartTwo = echarts.init(ctx)

      const startAngle = 220
      const endAngle = -40
      let option = {
        backgroundColor: '#fff',
        title: [
          {
            text: `{value|${70.1}%}\n{name|${'收款比率'}}`,
            left: 'center',
            bottom: '23%',
            textStyle: {
              rich: {
                value: {
                  fontSize: '20',
                  fontWeight: '900',
                  color: 'green',
                  padding: [8, 0]
                },
                name: {
                  fontSize: '14',
                  color: 'green'
                }
              }
            }
          }
        ],
        series: [
          {
            name: '最外层-刻度尺',
            type: 'gauge',
            radius: '55%',
            startAngle,
            endAngle,
            axisLine: {
              lineStyle: {
                color: [[1, 'green']],
                width: 1
              }
            },
            axisTick: {
              distance: -6,
              length: 7,
              lineStyle: {
                color: 'green'
              },
              splitNumber: 10
            },
            splitLine: {
              distance: -11,
              length: 14,
              lineStyle: {
                color: 'green',
                width: 1
              }
            },
            axisLabel: {
              show: false
            },
            pointer: {
              show: false
            }
          },
          {
            name: '内层带指针',
            type: 'gauge',
            radius: '52%',
            startAngle,
            endAngle,
            axisLine: {
              lineStyle: {
                color: [[1, '#abd79e']],
                width: 20
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: 'green',
                fontSize: '10px'
              }
            },
            detail: {
              show: false
            },
            pointer: {
              show: true,
              length: '86%',
              width: 10,
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: 'green'
                    },
                    {
                      offset: 1,
                      color: '#abd79e'
                    }
                  ]
                }
              }
            },
            progress: {
              show: true,
              width: 20,
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: 'green'
                    },
                    {
                      offset: 1,
                      color: '#9bd08c'
                    }
                  ]
                }
              }
            },
            data: [
              {
                value: 70
              }
            ]
          },
          {
            name: '中心效果圆',
            type: 'gauge',
            radius: '14%',
            startAngle: 0,
            endAngle: 360,
            axisLine: {
              lineStyle: {
                color: [[1, 'green']],
                width: 1
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            detail: {
              show: false
            },
            pointer: {
              show: false
            },
            progress: {
              show: true,
              width: 1,
              itemStyle: {
                color: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#abd79e'
                    },
                    {
                      offset: 0.7,
                      color: '#9bd08c'
                    },
                    {
                      offset: 1,
                      color: 'green'
                    }
                  ]
                }
              }
            },
            data: [
              {
                value: 100
              }
            ]
          },
          {
            type: 'pie',
            radius: ['70%', '69.5%'],
            hoverAnimation: false,
            clockWise: false,
            itemStyle: {
              normal: {
                color: 'green'
              }
            },
            label: {
              show: false
            },
            data: [100]
          }
        ]
      }
      this.chartTwo.setOption(option)
    }
  }
}
</script>

<style scoped lang="scss">
.payment{
  width: 100%;
  display: flex;
  justify-content: space-around;

  .title-name {
    width: 100%;
    color: green;
    font-weight: 900;
    text-align: center;
    margin-top: 10px;
  }
  .bottom-info {
    display: flex;
    justify-content: space-evenly;
    text-align: center;
    margin-bottom: 15px;
    div{
      padding: 0 15px;
    }
    p {
      color: #333;
      font-weight: 400;
      font-size: 14px;
    }
    span {
      color: green;
      font-size: 20px;
      font-weight: 900;
    }
  }
}
::v-deep .el-divider {
  margin-top: 20px;
  height: 280px;
  z-index: 999;
}
</style>
